import React, { useEffect, useState } from "react";
import { LiveContent } from "./LiveContext";
import { useRunner } from "./LiveRunner";

export function LiveProvider({
  children,
  code: initCode = "",
  scope = undefined,
}) {
  const [code, onChange] = useState(initCode);

  const { element, error } = useRunner({ code, scope });

  return (
    <LiveContent.Provider value={{ code, onChange, element, scope, error }}>
      {children}
    </LiveContent.Provider>
  );
}
